<template>
  <div class="headerTitle">公积金信息</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">公积金类型</div>
      <div class="itemValue" @click="payTypeShow = true">
        <div>
          {{ gjjInfo.payType ? gjjInfo.payType : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="payTypeShow"
          :columns="payTypeCols"
          :defaultIndex="[0]"
          @cancel="payTypeShow = false"
          @confirm="checkPayType"
        ></up-picker>
      </div>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gjjInfo"
      >
        <up-form-item
          label="公积金单位名称"
          prop="payUnit"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gjjInfo.payUnit"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="areaItem">
      <div class="itemTitle">个人公积金账户状态</div>
      <div class="itemValue" @click="payStateShow = true">
        <div>
          {{ gjjInfo.payState ? gjjInfo.payState : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="payStateShow"
          :columns="payStateCols"
          :defaultIndex="[0]"
          @cancel="payStateShow = false"
          @confirm="checkPayState"
        ></up-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">公积金缴纳城市</div>
      <div class="itemValue" @click="payCityShow = true">
        <div>
          {{ gjjInfo.payCity ? gjjInfo.payCity : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-picker
          :show="payCityShow"
          :columns="payCityCols"
          :defaultIndex="[0]"
          @cancel="payCityShow = false"
          @confirm="checkPayCity"
        ></up-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">现单位公积金起缴日期</div>
      <div class="itemValue" @click="payStartDateShow = true">
        <div>
          {{ gjjInfo.payStartDate ? gjjInfo.payStartDate : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-datetime-picker
          hasInput
          :show="payStartDateShow"
          mode="date"
          @cancel="payStartDateShow = false"
          :minDate="startTime"
          :maxDate="nowTime"
          @confirm="checkpayStartDate"
        ></up-datetime-picker>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">公积金最新缴存日期</div>
      <div class="itemValue" @click="payLatestDateShow = true">
        <div>
          {{ gjjInfo.payLatestDate ? gjjInfo.payLatestDate : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <!-- #待更待 -->
        <up-datetime-picker
          hasInput
          :show="payLatestDateShow"
          mode="date"
          @cancel="payLatestDateShow = false"
          :minDate="startTime"
          :maxDate="nowTime"
          @confirm="checkpayLatestDate"
        ></up-datetime-picker>
      </div>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="200rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gjjInfo"
      >
        <up-form-item
          label="公积金余额(元)"
          prop="balance"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gjjInfo.balance"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="330rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gjjInfo"
      >
        <up-form-item
          label="公积金个人缴存基数(元)"
          prop="selfBaseNum"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gjjInfo.selfBaseNum"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="300rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="gjjInfo"
      >
        <up-form-item
          label="公积金月缴存总额(元)"
          prop="totalNum"
          borderBottom
          customStyle="width:100%;"
        >
          <up-input
            v-model="gjjInfo.totalNum"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
  </div>

  <div class="headerTitle">材料要求</div>
  <div class="askArea">
    <div class="askItem">1、提供支付宝公积金查询详细照片</div>
    <div class="askItem">2、提供缴存单位企业查查信息详细照片</div>
  </div>

  <div class="headerTitle">相关证明材料影像件</div>
  <div class="mainArea">
    <up-textarea
      v-model="moreInfo"
      placeholder="请输入"
      autoHeight
      border="none"
    >
    </up-textarea>
    <div class="addImgArea">
      <img
        src="../../static/face/new_icon_01.png"
        alt=""
        class="chooseImg"
        @click="chooseImg"
      />
    </div>
    <div class="btnArea">
      <div class="btn close" @click="closePage">关闭</div>
      <div class="btn save" @click="savePage">保存</div>
    </div>
  </div>
</template>

<script setup>
import * as utils from "../../utils/utils";
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
import { useImagePicker } from '@/hooks/useImagePicker';
const { imgList, chooseImg, uploadFiles } = useImagePicker();
const store = useAppStore();
const startTime = ref(0);
const nowTime = ref(0);
onMounted(() => {
  let startDate = new Date("1980-01-01 00:00:00");
  startTime.value = startDate.getTime(); //开始时间戳
  let nowDate = new Date();
  nowTime.value = nowDate.getTime(); //当前时间戳
});
const isCheck = ref(false);
let orderId = null;
onLoad((option) => {
  let param = JSON.parse(option.value);
  if (param.isCheck) {
    isCheck.value = true;
    http.creditProvidentFundDetail({ id: param.id }).then((res) => {
      gjjInfo.payType = res.data.depositType;
      gjjInfo.payUnit = res.data.depositoryCompany;
      gjjInfo.payState = res.data.currentDepositStatus;
      gjjInfo.payCity = res.data.depositCity;
      gjjInfo.payStartDate = res.data.depositStartDate;
      gjjInfo.payLatestDate = res.data.lastDepositDate;
      gjjInfo.balance = res.data.accountBalance;
      gjjInfo.selfBaseNum = res.data.depositBase;
      gjjInfo.totalNum = res.data.monthlyDeposit;
      moreInfo.value = res.data.supplementExplain;
    });
  } else {
    orderId = param.orderId;
  }
});
const moreInfo = ref("");
const gjjInfo = reactive({
  payType: "", //公积金类型
  payUnit: "", //公积金单位名称
  payState: "", //个人公积金账户状态
  payCity: "", //公积金缴纳城市
  payStartDate: "", //现单位公积金起缴日期
  payLatestDate: "", //公积金最新缴存日期
  balance: "", //公积金余额
  selfBaseNum: "", //公积金个人缴存基数
  totalNum: "", //公积金月缴存总额
});
// 公积金类型
const payTypeShow = ref(false);
const payTypeCols = reactive([["省公积金", "市公积金"]]);
const checkPayType = (e) => {
  // #业务代码
  console.log(e.value[0]);
  gjjInfo.payType = e.value[0];
  payTypeShow.value = false;
};
// 个人公积金账户状态
const payStateShow = ref(false);
const payStateCols = reactive([["正常", "封存", "销户"]]);
const checkPayState = (e) => {
  // #业务代码
  console.log(e.value[0]);
  gjjInfo.payState = e.value[0];
  payStateShow.value = false;
};
// 公积金缴纳城市
const payCityShow = ref(false);
const payCityCols = reactive([
  ["合肥市", "蚌埠市", "六安市", "铜陵市", "宿州市", "其他城市"],
]);
const checkPayCity = (e) => {
  // #业务代码
  console.log(e.value[0]);
  gjjInfo.payCity = e.value[0];
  payCityShow.value = false;
};
// 现单位公积金起缴日期
const payStartDateShow = ref(false);
const checkpayStartDate = (e) => {
  console.log(e.value); //返回时间戳
  gjjInfo.payStartDate = utils.getFormatDate(e.value);
  payStartDateShow.value = false;
};
// 公积金最新缴存日期
const payLatestDateShow = ref(false);
const checkpayLatestDate = (e) => {
  console.log(e.value); //返回时间戳
  gjjInfo.payLatestDate = utils.getFormatDate(e.value);
  payLatestDateShow.value = false;
};

// 关闭
const closePage = () => {
  wx.navigateBack();
};
// 保存
const savePage = async () => {
  if (isCheck.value) {
    wx.navigateBack({ delta: 1 });
  } else {
    const fileInfoList = await uploadFiles();  
    console.log('fileInfoList----', fileInfoList);
    http
      .creditProvidentFundAdd({
        creditFirstType: "2",
        creditSecondType: "1",
        orderId,
        creditId: store.creditId,
        depositType: gjjInfo.payType,
        depositoryCompany: gjjInfo.payUnit,
        currentDepositStatus: gjjInfo.payState,
        depositCity: gjjInfo.payCity,
        depositStartDate: gjjInfo.payStartDate,
        lastDepositDate: gjjInfo.payLatestDate,
        accountBalance: gjjInfo.balance,
        depositBase: gjjInfo.selfBaseNum,
        monthlyDeposit: gjjInfo.totalNum,
      })
      .then((res) => {
        wx.showToast({
          title: "保存成功",
          icon: "none",
          duration: 1000,
          mask: true,
        });
        setTimeout(() => {
          wx.navigateBack();
        }, 1000);
      })
      .catch((err) => {
        wx.showToast({
          title: "保存失败",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      });
  }
};
</script>

<style scoped lang="scss">
.headerTitle {
  font-size: 24rpx;
  color: #666666;
  padding-top: 20rpx;
  padding-left: 34rpx;
  padding-bottom: 10rpx;
}
.askArea {
  padding: 10rpx 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #fff;
  .askItem {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #666666;
  }
}
.mainArea {
  background-color: #fff;
  padding: 0 35rpx;
  .formItem {
    padding-left: 5rpx;
    height: 88rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
  .areaItem {
    padding-left: 5rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      font-size: 28rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #999;
      .selectIcon {
        width: 12rpx;
        height: 12rpx;
        border-top: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
        transform: rotate(45deg);
        margin-left: 13rpx;
      }
    }
  }
  .addImgArea {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    .chooseImg {
      width: 90rpx;
      height: 82rpx;
      margin: 20rpx 10rpx;
    }
  }
  .btnArea {
    display: flex;
    padding: 40rpx 0;
    justify-content: center;
    align-items: center;
    .btn {
      width: 110rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
      border-radius: 8rpx;
      margin: 0 10rpx;
    }
    .close {
      background-color: #c0c0c0;
    }
    .save {
      background-image: linear-gradient(to right, #619df1, #4478c1);
    }
  }
}
</style>
